<template>
  <div class="SimpleFlowChart">
    <div v-for="(link, index) in props.links">
      <div v-if="index === 0">
        <box :text="(getNode((link as any).source) as any).name" :color="(getNode((link as any).source) as any).color" />
        <arrow />
        <box :text="(getNode((link as any).target) as any).name" :color="(getNode((link as any).target) as any).color" />
        <arrow />
      </div>

      <div v-if="index !== 0 && index !== props.links.length - 1">
        <box :text="(getNode((link as any).target) as any).name" :color="(getNode((link as any).target) as any).color" />
        <arrow />
      </div>

      <div v-if="index === props.links.length - 1">
        <box :text="(getNode((link as any).target) as any).name" :color="(getNode((link as any).target) as any).color" />
        <div class="bottom-box"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import box from './box.vue'
import arrow from './arrow.vue'

const props = defineProps({
  nodes: {
    type: Array,
    default: () => []
  },

  links: {
    type: Array,
    default: () => []
  }
})

const getNode = (id: number) => {
  const temp = props.nodes.find((i:any) => {
    return i.id === id
  })
  return temp
}

</script>

<style lang="scss" scoped>
.SimpleFlowChart {
  color: #fff;
  background-color: #2c2d2d;
  // height: 100%;
  // overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
  .bottom-box {
    height: 30px;
  }
}
</style>